// Name:            Alert
// Description:     Defines styles for alert messages
//
// Component:       `am-alert`
//
// Sub-objects:     `am-alert-close`
//
// Modifiers:       `am-alert-success`
//                  `am-alert-warning`
//                  `am-alert-danger`
//                  `am-alert-secondary`
//
// Uses:            Close: `am-close`
//
// ========================================================================

// Variables
// ========================================================================

@alert-margin-vertical: 15px;
@alert-padding: 10px;
@alert-background: @global-primary;
@alert-color: #fff;

@alert-success-background: @global-success;
@alert-success-color: #fff;

@alert-warning-background: @global-warning;
@alert-warning-color: #fff;

@alert-danger-background: @global-danger;
@alert-danger-color: #fff;

@alert-secondary-background: @gray-lighter;
@alert-secondary-color: @gray;


// Alerts
.alert-variant(@background; @border; @text-color) {
  background-color: @background;
  border-color: @border;
  color: @text-color;
}

/* ========================================================================
   Component: Alert
 ========================================================================== */

.am-alert {
  margin-bottom: @alert-margin-vertical;
  padding: @alert-padding;
  background: @alert-background;
  color: @alert-color;
  border: 1px solid darken(@global-primary, 6%);
  border-radius: @global-border-radius;
  a {
    color: @white;
  }

  .hook-alert;

  /*
  * Keep color for headings if the default heading color is changed
  */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: inherit;
  }
}

/* Add margin if adjacent element */
* + .am-alert {
  margin-top: @alert-margin-vertical;
}

/* Remove margin from the last-child */
.am-alert > :last-child {
  margin-bottom: 0;
}


/* Close in alert */

.am-alert > .am-close:first-child {
  float: right;
  height: auto;
  margin: -3px -5px auto auto;
}

/* Remove margin from adjacent element*/
.am-alert > .am-close:first-child + * {
  margin-top: 0;
}


/* Modifier: `am-alert-success`*/
.am-alert-success {
  .alert-variant(@alert-success-background, darken(@alert-success-background, 6%), @alert-success-color);
  .hook-alert-success;
}

/* Modifier: `am-alert-warning` */
.am-alert-warning {
  .alert-variant(@alert-warning-background, darken(@alert-warning-background, 6%), @alert-warning-color);
  .hook-alert-warning;
}

/* Modifier: `am-alert-danger` */
.am-alert-danger {
  .alert-variant(@alert-danger-background, darken(@alert-danger-background, 6%), @alert-danger-color);
  .hook-alert-danger;
}

/* Modifier: `am-alert-secondary`
 ========================================================================== */

.am-alert-secondary {
  .alert-variant(@alert-secondary-background, darken(@alert-secondary-background, 6%), @alert-secondary-color);
  .hook-alert-danger;
}

// Hooks
// ========================================================================

.hook-alert() {}

.hook-alert-success() {}

.hook-alert-warning() {}

.hook-alert-danger() {}

.hook-alert-secondary() {}

.hook-alert-misc() {}